﻿@{
    Layout = "~/Views/Shared/_LayoutAdminPage.cshtml";
}

@section header{

    <style>
        body .tox-tinymce-aux {
            z-index: 19892000;
        }
    </style>

}

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">标&emsp;题:</label>
                        <div class="layui-input-inline">
                            <input name="title" class="layui-input" placeholder="输入标题" />
                        </div>
                    </div>

                    <div class="layui-inline">
                        &emsp;
                        <button class="layui-btn icon-btn" lay-filter="diyPageTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="diyPageTable" lay-filter="diyPageTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="diyPageTbBar">
    <a class="layui-btn layui-btn-xs" lay-event="visit">访问</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!-- 表单弹窗 -->
<script type="text/html" id="diyPageEditDialog">
    <form id="diyPageEditForm" lay-filter="diyPageEditForm" class="layui-form model-form" style="padding-right: 20px;">
        <div class="layui-row">
            <div class="layui-col-md6">
                <input name="id" value="0" type="hidden" />
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">标题:</label>
                    <div class="layui-input-block">
                        <input name="title" placeholder="请输入标题" class="layui-input"
                               lay-verType="tips" lay-verify="required" required />
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">关键词:</label>
                    <div class="layui-input-block">
                        <input name="keywords" placeholder="请输入关键词" class="layui-input" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">描述:</label>
                    <div class="layui-input-block">
                        <input name="description" placeholder="请输入描述" class="layui-input" />
                    </div>
                </div>
            </div>


            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">路由名称:</label>
                    <div class="layui-input-block">
                        <input name="route" placeholder="请输入路由名称" class="layui-input"
                               lay-verType="tips" lay-verify="required" required />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">子版页:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="isMaster" value="1" title="是" checked />
                        <input type="radio" name="isMaster" value="0" title="否" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">状态:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="正常" checked />
                        <input type="radio" name="status" value="0" title="禁用" />
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">页面内容:</label>
            <div class="layui-input-block">
                <textarea id="htmlContentTool" name="htmlContent"></textarea>
            </div>
        </div>


        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="diyPageEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<script type="text/javascript" src="/assets/libs/tinymce/tinymce.min.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin', 'xmSelect', 'notice', 'fileChoose'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;
        var notice = layui.notice;
        var fileChoose = layui.fileChoose;


        /* 渲染表格 */
        var insTb = table.render({
            elem: '#diyPageTable',
            url: '/api/admin/DiyPage/GetDiyPageList',
            //limit: 20, //默认展示数
            page: true,
            toolbar: ['<p>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                { type: 'checkbox' },
                { field: 'id', width: 60, align: 'center', sort: true },
                { field: 'route', title: '路由名称', align: 'center' },
                { field: 'title', title: '标题', align: 'center' },
                {
                    field: 'isMaster', title: '子版页', templet: function (d) {
                        var strs = [
                            '<span class="text-danger">否</span>',
                            '<span class="text-success">是</span>'
                        ];
                        return strs[d.isMaster];
                    }, align: 'center', sort: true
                },
                {
                    field: 'status', title: '状态', templet: function (d) {
                        var strs = [
                            '<span class="text-danger">禁用</span>',
                            '<span class="text-success">正常</span>'
                        ];
                        return strs[d.status];
                    }, align: 'center', sort: true
                },
                {
                    field: 'createTime', title: '创建时间', templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, sort: true
                },
                { title: '操作', toolbar: '#diyPageTbBar', align: 'center', minWidth: 200 }
            ]]
        });


        /* 表格搜索 */
        form.on('submit(diyPageTbSearch)', function (data) {
            insTb.reload({ where: data.field, page: { curr: 1 } });
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(diyPageTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showEditModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            } else if (obj.event === 'visit') {
                window.open("/Page/" + obj.data.route);
            }
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(diyPageTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showEditModel();
            } else if (obj.event === 'del') { // 删除
                var checkRows = table.checkStatus('diyPageTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', { icon: 2 });
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doDel({ ids: ids });
            }
        });



        /* 显示表单弹窗 */
        function showEditModel(mData) {
            admin.open({
                type: 1,
                area: '800px',
                maxmin: true,
                resize: true,
                title: (mData ? '修改' : '添加') + '信息',
                content: $('#diyPageEditDialog').html(),
                success: function (layero, dIndex) {

                    // 渲染代码富文本编辑器
                    tinymce.init({
                        selector: '#htmlContentTool',
                        height: 300,
                        branding: false,
                        language: 'zh_CN',
                        plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
                        toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
                        toolbar_drawer: 'sliding',
                        images_upload_url: '/api/admin/Public/Upload/UploadFile2?resultType=tinymce',
                        file_picker_types: 'media',
                        file_picker_callback: function (callback, value, meta) {
                            fileChoose.open({
                                fileUrl: '',
                                listUrl: '/api/admin/File/getfile',
                                num: 3,
                                dialog: {
                                    offset: '60px'
                                },
                                upload: {
                                    data: {
                                        dir: function () {
                                            return $('#tv-current-position').text();
                                        }
                                    },
                                    url: "/api/admin/Public/Upload/UploadFile2"
                                },
                                onChoose: function (urls) {
                                    callback(urls[0].url);
                                }
                            });
                            setTimeout(function () {
                                $(".layer-file-choose").css("z-index", "300000000");
                            }, 200)
                        },
                        init_instance_callback: function (editor) {
                            console.log("init_instance_callback");
                            tinymce.get('htmlContentTool').setContent(mData ? mData.htmlContent :"");
                        }
                    });


                    //console.log(htmlContentTool);
                    // 回显表单数据
                    form.val('diyPageEditForm', mData);


                    // 表单提交事件
                    form.on('submit(diyPageEditSubmit)', function (data) {
                        var loadIndex = layer.load(2);
                        var htmlContent = tinymce.get('htmlContentTool').getContent();
                        data.field.htmlContent = htmlContent;
                        $.post(mData ? '/api/admin/DiyPage/EditDiyPage' : '/api/admin/DiyPage/AddDiyPage', data.field, function (res2) {
                            layer.close(loadIndex);
                            if (1 == res2.code) {
                                layer.close(dIndex);
                                layer.msg(res2.message, { icon: 1 });
                                insTb.reload({ page: { curr: 1 } });
                            } else {
                                layer.msg(res2.message, { icon: 2 });
                            }
                        }, 'json');
                        return false;
                    });
                },
                end: function () {
                    tinymce.get('htmlContentTool').destroy(false);
                }
            });
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中数据吗？', {
                skin: 'layui-layer-admin',
                shade: .1
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post('/api/admin/DiyPage/DeleteDiyPage', {
                    ids: obj.data ? obj.data.id : obj.ids.join(',')
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code == 1) {
                        layer.msg(res.message, { icon: 1 });
                        insTb.reload({ page: { curr: 1 } });
                    } else {
                        layer.msg(res.message, { icon: 2 });
                    }
                }, 'json');
            });
        }

    });

</script>
